<template>
    <div class="three-box" id="three-box"></div>
  </template>
  
  <script setup>
  import { Group } from "three";
  import { getCurrentInstance, onMounted, ref } from "vue";
  import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls'
  import * as dat from "dat.gui";
  const threeBox = ref();
  
  let { proxy } = getCurrentInstance();
  let THREE = proxy.$THREE;
  // const threeBox = ref();
  onMounted(() => {
    initThree();
  });
  
  const clock = new THREE.Clock();

  const gui = new dat.GUI();
  
  const initThree = () => {
    const threeBox = document.getElementById("three-box");
  
    const scene = new THREE.Scene();

    
  
    const camera = new THREE.PerspectiveCamera(
      75,
      threeBox.clientWidth / threeBox.clientHeight,
      0.1,
      1000
    );
    scene.add(new THREE.AmbientLight(0xffffff,0.2))
    let light = new THREE.DirectionalLight(0xffffff)
    // light.position.set(2,2,2)
    scene.add(light);
  
 
    gui.add(light.position, 'x',-5,5).name('灯光位置x')
    gui.add(light.position, 'y',-5,5).name('灯光位置y')
    gui.add(light.position, 'z',-5,5).name('灯光位置z')

    const renderer = new THREE.WebGLRenderer();
    renderer.setSize(threeBox.clientWidth, threeBox.clientHeight);
    camera.position.set(1.5, -4, 0);
    camera.lookAt(0, 0, 0);
    const orbitControls = new OrbitControls(camera,renderer.domElement) //鼠标交互、左键移动场景、滚轮放大缩小、右键平移
    const sphere = new THREE.SphereGeometry(1, 10, 15);
    // const material = new THREE.MeshNormalMaterial({ 
    //   color: 0x0000ff,
    //   flatShading: true //菱角分明
    //  });
    const material = new THREE.MeshLambertMaterial({ 
      color: 0xff00ff,
      flatShading: false
     });

     const material2 = new THREE.MeshPhongMaterial({ 
      color: 0xff00ff
     });

     const material3 = new THREE.MeshStandardMaterial({ 
      color: 0xff00ff,
      roughness: 1.5,
      metalness:0.8
     });

    const moon = new THREE.Mesh(sphere, material);

    const mesh = new THREE.Mesh(sphere, material2);

    const mesh2 = new THREE.Mesh(sphere, material3);
  
    moon.position.x = 1.5;
    mesh.position.x = 1.5;
    mesh.position.y = -2
    mesh2.position.x = 1.5;
    mesh2.position.y = -4

    threeBox.appendChild(renderer.domElement);
  
    scene.add(moon);
    scene.add(mesh);
    scene.add(mesh2);

    camera.position.z = 8;
  
    function animate() {

        requestAnimationFrame(animate);
        orbitControls.update()

        renderer.render(scene, camera);
    }

    animate();
  };
  </script>
  
  <style>
  .three-box {
    position: fixed;
    top: 0;
    left: 200px;
    right: 0;
    bottom: 0;
    width: 100%;
  }
  </style>